<script setup>
import {onMounted, nextTick} from "vue";
import { Scene, ImageLayer, PointLayer} from '@antv/l7';
import { Map } from '@antv/l7-maps';

let scene
const props=defineProps(["x", "y", "t"])
onMounted(()=>{
 nextTick(()=>{
   scene = new Scene({
     id: 'map',
     map: new Map({
       center: [ props.x, props.y ],
       zoom: 4,
       version: 'SIMPLE',
       mapSize: 1000,
       maxZoom: 5,
       minZoom: 2,
       pitchEnabled: false,
       rotateEnabled: false
     })
   });
   scene.setBgColor('rgb(94, 182, 140)');

   const imagelayer = new ImageLayer({}).source(
       '/地图.jpg',
       {
         parser: {
           type: 'image',
           extent: [ 360, 400, 640, 600 ]
         }
       }
   );

   scene.on('loaded', () => {
     addTextLayer([
       {
         x:props.x,
         y:props.y,
         t:props.t,
       }
     ])
     scene.addLayer(imagelayer);
   });

  const addTextLayer=(data)=> {
    const textlayer = new PointLayer({zIndex: 2})
        .source(
            data,
            {
              parser: {
                type: 'json',
                x: 'x',
                y: 'y'
              }
            }
        )
        .shape('t', 'text')
        .size(14)
        .active({
          color: '#00f',
          mix: 0.9
        })
        .color('rgb(12,168,220)')
        .style({
          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
          spacing: 2, // 字符间距
          fontWeight: '800',
          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          stroke: '#ffffff', // 描边颜色
          strokeWidth: 2, // 描边宽度
          textAllowOverlap: true
        });
    scene.addLayer(textlayer);
  }
 })
})




</script>

<template>
  <div style="min-height: 600px; justify-content: center;position: relative" id="map"/>
</template>

<style scoped>

</style>